<template>
  <div class="statusWrap">
    <div class="p-d b-f">
      <div>
        <div
          style="position: relative; display: inline"
          v-for="(items, index) in resDataValue"
          :key="index"
        >
          <div class="cardWrapWidth">
            <div
              v-if="items.status != 0"
              class="startCollect"
              :class="[
                'img',
                {
                  startCollect: items.stageId === 1,
                  primaryStart: items.stageId === 2,
                  checkStart: items.stageId === 3,
                  finalStart: items.stageId === 4,
                },
              ]"
            >
              <div class="titleBlue">{{ items.stageName }}</div>
              <div class="info">
                共
                <span class="num">{{ items.allNum || 0 }}</span>
                项
              </div>
              <div class="statusIng commonStatus" v-if="items.status == 1">
                进行中
              </div>
              <div class="status commonStatus" v-if="items.status == 2">
                已结束
              </div>
            </div>
            <div
              v-else
              :class="[
                'img',
                {
                  noStartCollect: items.stageId === 1,
                  primaryNoStart: items.stageId === 2,
                  checkNoStart: items.stageId === 3,
                  finalNoStart: items.stageId === 4,
                },
              ]"
            >
              <div class="titleGrey">{{ items.stageName }}</div>
              <div class="infoGrey">
                共
                <span class="numGrey">{{ items.allNum }}</span>
                项
              </div>
              <div class="commonStatus statusGrey">未开始</div>
            </div>
          </div>
          <div class="arrowWrap" v-if="items.stageId != 4">
            <div
              class="arrowGrey arrow"
              v-if="items.status == 1 || items.status == 0"
            ></div>
            <div v-else class="arrowYellow arrow">
              <div>
                <div class="center">筛除</div>
                <div class="center">{{ items.rejectNum || 0 }}项</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  props: {},
  data() {
    return {
      resDataValue: [
        {
          id: 67,
          stageId: 1,
          stageName: "模块1",
          lockStatus: 0,
          status: 1,
          allNum: 7,
          candidateNum: 1,
          rejectNum: 0,
          enableFlag: 1,
          yearNum: 2025,
        },
        {
          id: 68,
          stageId: 2,
          stageName: "模块2",
          lockStatus: 0,
          status: 0,
          allNum: 1,
          candidateNum: 1,
          rejectNum: 0,
          enableFlag: 1,
          yearNum: 2025,
        },
        {
          id: 69,
          stageId: 3,
          stageName: "模块3",
          lockStatus: 0,
          status: 0,
          allNum: 1,
          candidateNum: 1,
          rejectNum: 0,
          enableFlag: 1,
          yearNum: 2025,
        },
        {
          id: 70,
          stageId: 4,
          stageName: "模块4",
          lockStatus: 0,
          status: 0,
          allNum: 1,
          candidateNum: 1,
          rejectNum: 0,
          enableFlag: 1,
          yearNum: 2025,
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.img {
  height: 100%;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.h-w {
  position: relative;
}
.f-c {
  display: flex;
  align-items: center;
}

.commonStatus {
  display: inline-block;
  padding: 4px 12px;
  margin: 1% 0 5% 6%;
  border-radius: 8px;
}
.startCollect {
  background-image: url("./../../../assets/img/collectStart.png");
  .titleBlue {
    padding: 5% 0 0 8%;
    color: #20c3b9;
    font-size: 24px;
  }
  .info {
    padding-left: 8%;
    color: #999;
  }
  .num {
    color: #20c3b9;
    margin: 0 2px;
  }
  .statusIng {
    background-color: #20c3b9;
    color: #fff;
  }
  .status {
    background-color: #93d6d6;
    color: #fff;
  }
}

.noStartCollect {
  background-image: url("./../../../assets/img/noStartCollect.png");
}

.primaryNoStart {
  background-image: url("./../../../assets/img/primaryNoStart.png");
}
.checkNoStart {
  background-image: url("./../../../assets/img/checkNoStart.png");
}

.finalNoStart {
  background-image: url("./../../../assets/img/finalNoStart.png");
}

.arrowGrey {
  background-image: url("./../../../assets/img/arrowGrey.png");
}
.arrowYellow {
  background-image: url("./../../../assets/img/arrow.png");
}
.finalStart {
  background-image: url("./../../../assets/img/finalStart.png");
  .titleBlue {
    padding: 5% 0 0 8%;
    color: #3a97e5;
    font-size: 24px;
  }
  .info {
    padding-left: 8%;
    color: #999;
  }
  .num {
    color: #3a97e5;
    margin: 0 2px;
  }
  .statusIng {
    background-color: #3a97e5;
    color: #fff;
  }
  .status {
    background-color: #b4cade;
    color: #fff;
  }
}

.checkStart {
  background-image: url("./../../../assets/img/checkStart.png");
  .titleBlue {
    padding: 5% 0 0 8%;
    color: #836be6;
    font-size: 24px;
  }
  .info {
    padding-left: 8%;
    color: #999;
  }
  .num {
    color: #836be6;
    margin: 0 2px;
  }
  .statusIng {
    background-color: #836be6;
    color: #fff;
  }
  .status {
    background-color: #b7b9dd;
    color: #fff;
  }
}
.primaryStart {
  background-image: url("./../../../assets/img/primaryStart.png");
  .titleBlue {
    padding: 5% 0 0 8%;
    color: #eca118;
    font-size: 24px;
  }
  .info {
    padding-left: 8%;
    color: #999;
  }
  .num {
    color: #eca118;
    margin: 0 2px;
  }
  .statusIng {
    background-color: #eca118;
    color: #fff;
  }
  .status {
    background-color: #e6cc97;
    color: #fff;
  }
}
.titleGrey {
  padding: 5% 0 0 8%;
  color: #6573a0;
  font-size: 24px;
}
.infoGrey {
  padding-left: 8%;
  color: #999;
}
.numGrey {
  color: #6573a0;
  margin: 0 2px;
}
.statusGrey {
  background-color: #c6cbda;
  color: #fff;
}
.hint {
  color: #20c3b9;
  font-weight: 900;
  margin-right: 2px;
}
.noStartStyle {
  color: #6573a0;
  font-weight: 900;
}
.doingStyle {
  color: #5272ec;
  font-weight: 900;
  font-size: 20px;
}
.doneStyle {
  color: #fb5858;
  font-weight: 900;
}
.heightWrap {
  width: 100%;
  overflow: hidden;
}
.heightContent {
  width: 102%;
  height: calc(100vh - 100px);
  overflow: auto;
}
.cardWrap {
  display: inline-block;
  width: 100%;
}
.cardWrapWidth {
  display: inline-block;
  width: calc((100% - 300px) / 4);
}
.arrowWrap {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 64px;
  margin: 0 10px;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.center {
  text-align: center;
}
.titleBlue {
  padding: 5% 0 0 8%;
  font-size: 24px;
  font-weight: bold;
}

.statusWrap {
  :deep(.el-input .el-input__inner) {
    color: #0394fb;
    font-size: 18px;
    border-color: #0394fb !important;
  }
  :deep(.el-select .el-input .el-select__caret) {
    color: #0394fb;
  }
}
</style>
